<template>
	<view>
		<u-swiper :list="swiperList" indicator indicatorMode="dot" @click="clickSwiperItem"
			keyName='img_url'></u-swiper>
		<u-grid :border="false" col="5">
			<u-grid-item v-for="(item,index) in imageList" :key="index">
				<image lazy-load :src="item" mode="" style="width: 1.44rem;height: 1.52rem;"></image>
			</u-grid-item>
		</u-grid>
		<view class="divider_line"></view>
		<view class="smart-img_1 smart-img" v-if="otherList[0]">
			<image lazy-load :src="`https:${otherList[0].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_1 smart-img" v-if="otherList[1]">
			<image lazy-load :src="`https:${otherList[1].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[2]">
			<image lazy-load :src="`https:${otherList[2].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item ">
			<u-row v-if="shopList[0]" :gutter='5'>
				<u-col span="4" @click='toShopDetail(item)' v-for="(item,index) in shopList[0].body.items" :key="index">
					<view class="item-img">
						<LazyLoad :src="item.img_url" width='100%'  ></LazyLoad>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="smart-img_2 smart-img" v-if="otherList[3]">
			<image lazy-load :src="`https:${otherList[3].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[4]">
			<image lazy-load :src="`https:${otherList[4].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item ">
			<u-row v-if="shopList[1]" :gutter='5'>
				<u-col span="4" @click='toShopDetail(item)' v-for="(item,index) in shopList[1].body.items" :key="index">
					<view class="item-img">
						<LazyLoad :src="item.img_url" width='100%'  ></LazyLoad>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[5]">
			<image lazy-load :src="`https:${otherList[5].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[6]">
			<image lazy-load :src="`https:${otherList[6].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[7]">
			<image lazy-load :src="`https:${otherList[7].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item ">
			<u-row v-if="shopList[2]" :gutter='5'>
				<u-col span="4" @click='toShopDetail(item)' v-for="(item,index) in shopList[2].body.items" :key="index">
					<view class="item-img">
						<LazyLoad :src="item.img_url" width='100%'  ></LazyLoad>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item ">
			<u-row v-if="shopList[3]" :gutter='5'>
				<u-col span="4" v-for="(item,index) in shopList[3].body.items" :key="index" @click='toShopDetail(item)'>
					<view class="item-img">
						<LazyLoad :src="item.img_url" width='100%'  ></LazyLoad>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[8]">
			<image lazy-load :src="`https:${otherList[8].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[9]">
			<image lazy-load :src="`https:${otherList[9].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-img_2 smart-img" v-if="otherList[10]">
			<image lazy-load :src="`https:${otherList[10].body.items[0].img_url}`" mode="widthFix"></image>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item ">
			<u-row v-if="shopList[4]" :gutter='5'>
				<u-col span="4" @click='toShopDetail(item)' v-for="(item,index) in shopList[4].body.items" :key="index">
					<view class="item-img">
						<LazyLoad :src="item.img_url" width='100%'  ></LazyLoad>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class="smart-item ">
			<u-row v-if="shopList[5]" :gutter='5'>
				<u-col span="4" @click='toShopDetail(item)' v-for="(item,index) in shopList[5].body.items" :key="index">
					<view class="item-img">
						<LazyLoad :src="item.img_url" width='100%'  ></LazyLoad>
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.product_name}}</text>
						<text class="info text-ellipsis">{{item.product_brief}}</text>
						<text class="moneys">¥{{item.show_price}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="divider_line"></view>
		<view class=" smart-img" v-if="otherList[11]" style="height: 2.8rem;">
			<image lazy-load style="height: 2.8rem;" :src="`https:${otherList[11].body.items[0].img_url}`"
				mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components:{LazyLoad},
		data() {
			return {
				shopList: [],
				otherList: [],
				swiperList: [],
				imageList: []
			};
		},
		methods: {
			clickSwiperItem(index) {
				
			},
			toShopDetail(item) {
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
						success() {

						}
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
						success() {

						}
					})
				}

			},
			fetchData() {
				this.$request.get('/getData', {
					type: 'activity',
					page_id: '10288'
				}).then((res) => {
					let shopList = []
					let otherList = []
					let swiperList = []
					let navList = []
					let data = res.data.data.data.sections
					data.forEach(item => {
						if (item.view_type == 'list_three_type4') {
							shopList.push(item)
						} else if (item.view_type == 'cells_auto_fill') {
							otherList.push(item)
						} else if (item.view_type == 'gallery') {
							this.swiperList = item.body.items
						}
					})
					navList = otherList.slice(0, 2)
					navList.forEach(item => {
						item.body.items.forEach(nav => {
							this.imageList.push(nav.img_url)
						})
					})
					otherList = otherList.slice(2)
					this.otherList = otherList
					this.shopList = shopList
				}).catch(e => {
					console.log('错误了:', e)
				})
			},

		},
		mounted() {
			this.fetchData()
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-swiper__wrapper,
	/deep/.u-swiper,
	/deep/.u-swiper__wrapper__item__wrapper__image {
		height: 3.6rem !important;
	}

	.smart-img {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.item-img {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.smart-img_1 {
		height: 1.12rem;
	}

	.smart-img_2 {
		height: 0.8rem;
	}

	.smart-item {
		padding: 0 0.16rem;
		background: rgb(240, 241, 243);

		.item-img {
			height: 2.21rem;

			image {
				height: 2.21rem;
			}
		}

		.info-box {
			line-height: 1.2;
			padding: 0.2rem 0.1rem;
			text-align: center;
			background: #fff;

			.name {
				display: inline-block;
				font-size: .24rem;
				text-align: center;
				padding: 0 0.12rem;
				font-weight: bolder;
				color: #3c3c3c;
				width: 90%;
			}

			.info {
				display: inline-block;
				color: #3c3c3c;
				font-size: .2rem;
				line-height: 1.6em;
				text-align: center;
				width: 100%;
			}

			.moneys {
				font-weight: 600;
				text-align: center;
				font-size: .28rem;
				font-family: Heiti SC, STHeiti;
				line-height: 1.2;
				color: rgb(245, 75, 75);
			}
		}
	}

	.divider_line {
		border-bottom: 0.16rem solid rgb(240, 241, 243);
		background-color: rgb(240, 241, 243);
	}
</style>